<!-- 注册页面 -->
<template>
  <div class="music-register">
    <a href="###" class="qq-logo">QQ</a>
    <div class="side" :style="imgList[currentIndex]"></div>
    <div class="main">
      <div class="content">
        <div class="form">
          <h1 class="title">欢迎注册QQ</h1>
          <p>每一天，乐在沟通。</p>
          <el-form
            class="register-form"
            ref="formData"
            :model="formData"
            :rules="rules"
          >
            <el-form-item prop="username">
              <el-input
                class="username"
                type="text"
                v-model="formData.username"
                placeholder="昵称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                class="password"
                type="password"
                v-model="formData.password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-button
              @click="submitForm('formData')"
              class="res-btn"
              type="primary"
              >立即注册</el-button
            >
          </el-form>
          <div class="footer">
            Copyright <span>©</span> 1998-2021Tencent All Rights Reserved
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 图片轮播
      imgList: [
        "background-image: url('https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-1.jpg');",
        "background-image: url('https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-3.jpg');",
        "background-image: url('https://cdn-go.cn/qq-web/zc.qq.com/latest/v3/img/01-4.jpg');",
      ],
      currentIndex: 0, //默认显示图片
      timer: "", //定时器
      // 表单数据
      formData: {
        username: "",
        password: "",
      },
      // 规则
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            transform: (value) => value,
            trigger: "blur",
          },
          {
            type: "string",
            message: "请输入不包含空格的字符",
            trigger: "blur",
            transform(value) {
              if (value && value.indexOf(" ") === -1) {
                return value;
              } else {
                return false;
              }
            },
          },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,16}/;
              if (!passwordreg.test(value)) {
                callback(
                  new Error("密码必须由数字、字母、特殊字符组合,请输入6-16位")
                );
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //定时器
    play() {
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex == 3) {
          this.currentIndex = 0;
        }
      }, 2000);
    },
    // 表单提交验证
    submitForm(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          localStorage.setItem(this.formData.username, this.formData.password);
          this.$router.push("./login");
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formData) {
      this.$refs[formData].resetFields();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.play();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less'  scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.music-register {
  .qq-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    background-size: 36px 43px;
    background-repeat: no-repeat;
    background-image: url("../assets/images/qq_logo.png");
    z-index: 2;
    height: 43px;
    line-height: 43px;
    padding-left: 46px;
    margin-left: 30px;
    margin-top: 18px;
    font-size: 36px;
    display: block;
    color: #000;
  }
  .side {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 480px;
    float: left;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .main {
    margin-left: 480px;
    position: relative;
    height: 100%;
    .content {
      position: absolute;
      padding-bottom: 10px;
      top: 50px;
      width: 100%;
      .form {
        position: relative;
        margin: 0 auto;
        width: 480px;
      }
      .title {
        font-weight: 400;
        font-size: 44px;
        margin-bottom: 20px;
      }

      p {
        font-size: 28px;
        margin-bottom: 50px;
        line-height: 1.2;
        color: #333;
      }
      .register-form {
        padding-bottom: 50px;
        .username,
        .password {
          border-radius: 4px;
          background: 0 0;
          text-align: left;
          font-size: 20px;
          width: 438px;
          height: 50px;
          line-height: 50px;
          margin-top: 15px;
        }
        .res-btn {
          width: 438px;
          height: 50px;
          line-height: 50px;
          margin-top: 18px;
          border: 1px #3083ff solid;
          border-radius: 4px;
          background-color: #3487ff;
          box-shadow: 0 5px 8px 0 rgba(24, 95, 255, 0.1);
          color: #fff;
          text-align: center;
          font-size: 24px;
        }
      }
      .footer {
        width: 438px;
        font-size: 14px;
        color: #bbb;
        text-align: center;
        margin: 30px 0;
        font-weight: lighter;
      }
    }
  }
}
</style>